<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* { margin:0; padding:0;}
		body { font-size:12px;}
		.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
		.comment h6 { font-weight:700; font-size:14px;}
		.para { margin-top:5px; text-indent:2em;background:#DDD;}
	</style>
	<script src = '../jquery-3.1.1.js'></script>
</head>
<body>
	<form id="form1" action="#">
		<p>评论:</p>
		<p>姓名: <input type="text" name="username" id="username" /></p>
		<p>内容: <textarea name="content" id="content"  rows="2" cols="20"></textarea></p>
		<p><input type="button" id="send" value="提交"/></p>
	</form>


	<div  class='comment'>已有评论：</div>
	<div id="resText" ></div>

	<script>
		/*$('#send').click(function () {
			$.get('get1.php', {
				username: $('#username').val(),
				content: $('#content').val()
			}, function (data, textStatus) {
				alert(data);
				$('#resText').html(data)
			})
		})*/
		$("#send").click(function(){
			$.get("get2.php", { 
				username :  $("#username").val() , 
				content :  $("#content").val()  
			}, function (data, textStatus){
				alert(data);
			    var username = $(data).find("comment").attr("username");
				var content = $(data).find("comment content").text();
			    var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
		        $("#resText").html(txtHtml); // 把返回的数据添加到页面上
			}, 'xml');
		})
	</script>
</body>
</html>